<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="¥ 126560">
            <template slot="charts">
              <div>周同比56.67%
                  <i class="iconfont icon-xiangshang"></i>
              </div>
              <div style="margin-top:5px">日同比19.96%
                  <i class="iconfont icon-xiangxia"></i>
              </div>
            </template>
            <template slot="footer">
              <span>日销售额￥12423</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
            <template slot="charts">
              <lineCharts></lineCharts>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="footer">
              <span>转换率64%</span>
            </template>
            <template slot="charts">
              <barCharts></barCharts>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <progressCharts></progressCharts>
            </template>
            <template slot="footer">
                <div style="font-size: 14px">周同比56.67%
                    <i class="iconfont icon-xiangshang"></i>
                    &nbsp;&nbsp;日同比19.96%
                    <i class="iconfont icon-xiangxia"></i>
                </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
import lineCharts from "./lineCharts";
import barCharts from "./barCharts";
import progressCharts from "./progressCharts";
export default {
  name: "Card",
  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts,
  },
};
</script>

<style scoped>
div >>> .el-card__body {
  padding: 13px;
}
</style>
